<template>
  <div>
    <temp
    late>
      <div class="block">
        <el-carousel height="300px" trigger="click">
          <el-carousel-item v-for="item in banner" :key="item.id">
            <h3 class="small"><img :src="item.imageUrl" alt="" /></h3>
          </el-carousel-item>
        </el-carousel>
      </div>
    </temp>
    <More :title="MusicTitle[0]" :src="Icon[0]">
      <span class="more" slot="more" @click="toMore(MusicTitle[0])">更多></span>
    </More>
    <div class="container">
      <item :data="itemHot" v-for="itemHot of hot" :key="itemHot.id"></item>
    </div>
    <More :title="MusicTitle[1]" :src="Icon[1]">
      <span class="more" slot="more" @click="toMore(MusicTitle[1])">更多></span>
    </More>
    <div class="container">
      <item :data="itemNew" v-for="itemNew of New" :key="itemNew.id"></item>
    </div>
    <More :title="MusicTitle[2]" :src="Icon[2]">
      <span class="more" slot="more" >更多></span>
    </More>
    <div class="container">
      <item :data="itemDj" v-for="itemDj of dj" :key="itemDj.index"></item>
    </div>
  </div>
  
</template>

<script>
import More from "../../components/More.vue";
import item from "./component/item.vue"
export default {
  data() {
    return {
      banner: [],
      hot:[],
      New:[],
      dj:[],
      MusicTitle:["热门歌曲","最新音乐","主播电台"],
      Icon:['/hot.png','/new.png','/dj.png']
    };
  },
  components: {
    More,
    item   
  },
  mounted() {
    this.$http("http://47.108.197.28:3000/banner").then((res) => {
    //   console.log(res.data.banners);
      this.banner = res.data.banners;
    });
    this.$http("http://47.108.197.28:3000/top/playlist/highquality").then((res) => {
      // console.log(res.data.playlists);
      res.data.playlists.forEach(item=>{
        var {coverImgUrl} =item;
        item.picUrl = coverImgUrl
      })
      this.hot= res.data.playlists.slice(0,3)
    });
    this.$http("http://47.108.197.28:3000/album/newest").then((res) => {
    //   console.log(res.data.albums);
      this.New = res.data.albums.slice(0,3)
    });
    this.$http("http://47.108.197.28:3000/personalized/djprogram  ").then((res) => {
    //   console.log(res.data.result);
      this.dj = res.data.result.slice(0,3);
    });
  },
  methods:{
    toMore(val){
      // console.log(val);
      var title = val;
      this.$router.push(`/MoreMusicDetail?title=${title}`)
    }
  }
};
</script>

<style scoped>
.el-carousel--horizontal {
  background: gainsboro;
}
.small > img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.more{
  display: inline-block;
  float: right;
}
</style>